<template>
  <el-card class="box-card">
  <div slot="header" class="clearfix">
    <div vertical-align="center">
      <el-button type="primary" @click="createdialogVisible = true">创建新值</el-button>
    </div>
    <br>
    <shopee-table class=dataTable stripe :data="globallistData">
      <shopee-table-column prop="project_name" label="项目名" fixed="left" :filters="filters" :filter-method="filterMethod" :width="100">
      </shopee-table-column>

      <shopee-table-column prop="key" label="配置key" :width="150">
      </shopee-table-column>

      <shopee-table-column prop="describe" label="描述" :width="150">
      </shopee-table-column>

      <shopee-table-column label="配置value"  :width="700">
        <template slot-scope="props">
          {{props.row.value}}
        </template>
      </shopee-table-column>

       <shopee-table-column label="操作" fixed="right" :width="150">
        <template slot-scope="props">
            <el-button  size="small" @click="deleteinfo(props.row.id)" type="danger">删除</el-button>
        </template>
      </shopee-table-column>
    </shopee-table>

    <el-dialog title="创建新的全局变量" :visible.sync="createdialogVisible" width="35%">
      <el-form style="width: 80%">
        <el-form-item label="活动ID">
          <shopee-input v-model="form.project_id"></shopee-input>
        </el-form-item>
        <el-form-item label="KEY">
          <shopee-input v-model="form.key"></shopee-input>
        </el-form-item>
        <el-form-item label="数值">
          <shopee-input v-model="form.value" autosize></shopee-input>
        </el-form-item>
        <el-form-item label="描述">
          <shopee-input v-model="form.describe" autosize></shopee-input>
        </el-form-item>
        <el-form-item>
          <div vertical-align="center">
            <el-button type="primary" @click="create('form')">Submit</el-button>
          </div>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
  </el-card>
  </template>

  <script>
    import {api, getRequest, postRequest} from "@/api/commit";
    export default {
      name : "TaskListView",
      data() {
        return {
          filters: [{
          text: 'All'
          }, {
          text: 'CRM',
          value: 'CRM'
          }, {
          text: 'DEMO',
          value: 'DEMO'
          }, {
          text: 'MBS',
          value: 'MBS'
          }],
          globallistData: [],
          createdialogVisible: false,
          form:{
            "project_id": '',
            "key": '',
            "value": '',
            "describe": ''
          }
        }
      },

      methods: {
        init_data() {
          getRequest(api['global_param_list']).then((res) => {
            res = res.resultReturn
            this.globallistData= res.data
          }, (error) => {
            console.info(error)
          })
        },
        filterMethod(val, {row, column}) {
          return row.project_name == val;
        },
        deleteinfo(id) {
          let params = {
            "param_id":id
          }
          console.log(params)
          postRequest(api['global_param_del'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
          }, (error) => {
            console.info(error)
          })
        },
        create(form) {
          let params = Object.assign({}, this.form);
          params.project_id = parseInt(params.project_id)
          postRequest(api['global_param_add'],params).then((res) => {
            res = res.resultReturn
            this.init_data()
            this.createdialogVisible = false
          }, (error) => {
            console.info(error)
          })
        }
      },
      mounted () {
        this.init_data()
      }
    }
  </script>
